<script setup lang="ts">
import {onMounted, ref, toRef, watch} from "vue";

let props = defineProps({
  activeIndex:{
    default:-1
  },
  index:{
    default:0
  },
  icon:{
    default:'',
  },

})

const active = ref(false)
const index = toRef(props,"index")

watch(index,(val)=>{
  console.log(props.index,val)
  if(props.index===props.activeIndex){
    active.value=true
  }else{
    active.value=false
  }
})

onMounted(()=>{
  if(props.index===props.activeIndex){
    active.value=true
  }else{
    active.value=false
  }
})

const emit = defineEmits(["click","update:index"])

const onClick = ()=>{
  emit("update:index",props.activeIndex)
  emit("click")
  console.log(props.index)
}


</script>

<template>
<v-icon :icon="active?icon:icon+'-outline'" style="margin-bottom: 20px" size="30" :color="active?'#00c853':'#ddd'" @click="onClick"></v-icon>
</template>

<style scoped lang="scss">


</style>
